<template>
  <view class="text-effect">
    <span v-for="(item, index) in list" :key="index">{{ item }}</span>
  </view>
</template>

<script>
  import { defineComponent, reactive } from 'vue'
  export default defineComponent({
    props: {
      text: {
        type: String,
        default: ''
      }
    },
    setup(props) {
      let list = reactive({ list: [] })
      list = props.text.slice('')
      return { list }
    }
  })
</script>

<style lang="scss" scoped>
  .text-effect {
    color: #177cff;
    font-size: $about-skill-name-size;
    margin: 0 auto;
    position: relative;
    letter-spacing: 1.5px;
    > span {
      display: inline-block;
      @extend %rock-scale;
    }
  }
  .text-effect span:nth-child(1),
  .text-effect span:nth-child(4),
  .text-effect span:nth-child(7),
  .text-effect span:nth-child(10) {
    color: #585858;
  }

  .text-effect span:nth-child(2),
  .text-effect span:nth-child(5),
  .text-effect span:nth-child(8) {
    color: #9d5cff;
  }
</style>
